<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
  <style>
      html,
      body,
      #map {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
          overflow: hidden;
      }
  </style>
</head>
<body>
<div id="map">
</div>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<script>
    var libPath = 'http://127.0.0.1:8080/mapbox/';
    const style = {
        "version": 8,
        "name": "lzugis",
        "sprite": libPath + "bank",
        "glyphs": libPath + "fonts/mapbox/{fontstack}/{range}.pbf",
        "sources": {
            "nav": {
                "type": "raster",
                "tiles": ['https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'],
                "tileSize": 256
            }
        },
        "layers": [{
            "id": "nav",
            "type": "raster",
            "source": "nav",
            "minzoom": 0,
            "maxzoom": 17
        }]
    }
    const dom = document.getElementById('map');
    window.map = new mapboxgl.Map({
        container: dom,
        style: style,
        center: [103.081163, 37.1612],
        zoom: 3.5,
        minZoom: 2,
        maxZoom: 18
    });

    map.on('load', () => {
        map.addSource('geojson', {
            type: 'geojson',
            data: 'data/point.geojson'
        })
        map.addLayer({
            'id': 'geojson',
            'source': 'geojson',
            'type': 'symbol',
            'layout': {
                'icon-image': 'cbc1',
                'icon-size': 0.8,
                'icon-allow-overlap': true,
                'text-field': ['get', 'name'],
                "text-size": 14,
                'text-font': ['Guardian Text Sans Web Bold', "Osaka"],
                'text-anchor': 'left',
                'text-offset': [1, 0],
                'text-allow-overlap': false
            },
            'paint': {
                "text-color": '#00ffff',
                'text-halo-color': '#ffffff',
                'text-halo-width': 0.2
            }
        });
    })
</script>
</body>
</html>